<template>
	<view class="search-popup">
		<view class="search">
			 <input class="search-inp" confirm-type="search" placeholder="请输入项目名称/项目编号" v-model="page.keyword" @confirm="searchProject"/>
			 <text class="search-btn" @click="searchProject">
				 <i class="iconfont iconsousuo"></i>
			 </text>
		</view>
		<view class="search-list">
			<view class="search-list__item" v-for="(item,index) in searchData" :key="index" @click="gotoProject(item)">
				<text>{{ item.projectName}}</text>
				<text>质评：{{ item.score }}</text>
			</view>
		</view>
		<view class="search-page">
			<uni-pagination show-icon="true" :total="total" :current="page.pageNo" @change="pageChange"></uni-pagination>
		</view>
	</view>
</template>

<script>
	import { supervisionList } from '@/common/api/map'
	export default {
		name: 'searchPopup',
		data() {
		  return {
				total: 0,
				page: {
					keyword: '',
					buildPeriod: '',
					districtCode: '',
					tenders: '',
					pageNo: 1,
					pageSize: 10
				},
				searchData: []
		  };
		},
		mounted() {
			this.loadProdectList();
		},
		methods: {
			loadProdectList() {
				supervisionList(this.page).then((res)=> {
					if(res.code == 20000){
						this.total = res.data.total;
						this.searchData = res.data.records;
					}
				})
			},
			pageChange({type,current}) {
				this.page.pageNo = current;
				this.loadProdectList();
			},
			searchProject() {
				this.page.pageNo = 1;
				this.loadProdectList();
			},
			gotoProject(point) {
				if(point.longitude == null || point.latitude == null){
					uni.showToast({
						title: '项目无经纬度信息',
						icon: 'none'
					})
				}else{
					this.$root.$viewer.goView({
						longitude: Number(point.longitude),
						latitude: Number(point.latitude),
						height: 1000
					});
					this.$emit('closePopup', 'search')
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.search-popup{
		position: relative;
		height: 900rpx;
		background: rgba(5, 38, 102, .8);
		box-shadow: 0px -1px 10px 0px rgba(0, 146, 255, 0.6);
		border-radius: 10px 10px 0px 0px;
		>.search{
			display: flex;
			height: 70rpx;
			padding: 30rpx 40rpx;
			>.search-inp{
				flex: 1;
				height: 100%;
				padding-left: 10rpx;
				color: #fff;
				text-indent: 10rpx;
        box-shadow: 0px -1px 10px 0px rgba(0, 146, 255, 0.8) inset;
				font-size: 28rpx;
				.uni-input-input, .uni-input-placeholder{
          font-size: 20rpx;
          color: #eee ;
        }
			}
			>.search-btn{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100rpx;
				height: 100%;
				box-shadow: 0px -1px 10px 0px rgba(0, 146, 255, 0.8) inset;
				border-left: none;
				i{
					color: #00FFFF;
					font-size: 42srpx;
				}
			}
		}
		>.search-list{
			padding: 0 60rpx;
			>.search-list__item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 64rpx;
				line-height: 64rpx;
				color: #fff;
				font-size: 24rpx;
				border-bottom: 1px solid #133050;
				>text:first-child{
					width: 80%;
					height: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				>text:last-child{
					width: 20%;
					height: 100%;
					text-align: right;
				}
			}
		}
		>.search-page{
			position: absolute;
			bottom: 20rpx;
			display: flex;
			justify-content: center;
			width: 100%;
			/deep/ .uni-pagination__num-current-text{
				color: #fff;
			}
		}
	}
</style>
